import { View, Swiper, SwiperItem } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import { useState } from 'react';
import { AtButton } from 'taro-ui';
import Product from '@/components/Product/index';
import './index.scss';

export default function Home() {
    useLoad(() => {
        console.log('Page loaded.');
        // 页面加载时调用网络请求函数
    });

    const handleEnterCategoryPage = () => {
        // 跳转到目的页面，打开新页面
        Taro.navigateTo({
            url: '/pages/category/index',
        });
    };

    return (
        <div className='home'>
            <div className='swiper'></div>
            {/* <Swiper
        className="swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots
        autoplay
      >
        <SwiperItem>
          <View className="demo-text-1">1</View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-2">2</View>
        </SwiperItem>
        <SwiperItem>
          <View className="demo-text-3">3</View>
        </SwiperItem>
      </Swiper> */}
            <div className='categoryBox'>
                <div className='categoryGroup'>
                    <div className='category' onClick={handleEnterCategoryPage}>
                        <div className='img'></div>
                        <div className='categoryName'>水果生鲜</div>
                    </div>
                    <div className='category'>
                        <div className='img'></div>
                        <div className='categoryName'>食品粮油</div>
                    </div>
                    <div className='category'>
                        <div className='img'></div>
                        <div className='categoryName'>特卖促销</div>
                    </div>
                    <div className='category'>
                        <div className='img'></div>
                        <div className='categoryName'>进口水果</div>
                    </div>
                    <div className='category'>
                        <div className='img'></div>
                        <div className='categoryName'>进口水果</div>
                    </div>

                    <div className='category'>
                        <div className='img'></div>
                        <div className='categoryName'>进口水果</div>
                    </div>
                </div>
            </div>
            <div className='productList'>
                {/* <div className="productItem">
          <div className="productImg"></div>
          <div className="productContent">
            <div className="productDesc">
              【仅限深圳同城地区】新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆
              等你抢购【商品名称】
            </div>
            <div className="productFooter">
              <div className="productPrice">¥ 36</div>
              <div className="productBuy"></div>
            </div>
          </div>
        </div>

        <div className="productItem">
          <div className="productImg"></div>
          <div className="productContent">
            <div className="productDesc">
              【仅限深圳同城地区】新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆
              等你抢购【商品名称】
            </div>
            <div className="productFooter">
              <div className="productPrice">¥ 36</div>
              <div className="productBuy"></div>
            </div>
          </div>
        </div> */}
                <Product />
                <Product />
                <Product />
                <Product />
            </div>
        </div>
    );
}
